<template>
  <view class="dialog-root" :style="{width:systemInfo.windowWidth+'px',height:systemInfo.windowHeight+'px'}" v-if="isShow">
    <!-- 遮罩层 -->
    <view 
      class="dialog-mask" 
	  :style="{width:systemInfo.windowWidth+'px',height:systemInfo.windowHeight+'px'}"
      @click="handleMaskClose"
    ></view>

    <!-- 对话框主体 -->
    <view class="dialog-container" :style="{width:systemInfo.windowWidth*0.8+'px'}">
      <!-- 标题 -->
      <view class="dialog-title">{{ title || '输入内容' }}</view>

      <!-- 输入框 -->
      <textarea
	 
        class="dialog-input"
        :placeholder="placeholder || '请输入内容...'"
        :maxlength="maxlength || 200"
        v-model="inputValue"
        @input="handleInput"
        :focus="isShow"
      ></textarea>

      <!-- 输入字数提示 -->
      <view class="dialog-count">{{ inputValue.length }}/{{ maxlength || 200 }}</view>

      <!-- 按钮组 -->
      <view class="dialog-btn-group">
        <button class="dialog-btn cancel-btn" @click="handleCancel">取消</button>
        <button class="dialog-btn confirm-btn" @click="handleConfirm" :disabled="!inputValue.trim()">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'InputDialog',
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    maxlength: {
      type: Number,
      default: 200
    },
    initialValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      inputValue: '',
	  systemInfo:{}
    };
  },
  watch: {
    initialValue(newVal) {
      this.inputValue = newVal || '';
    },
    isShow(newVal) {
      if (newVal) {
        // 当对话框显示时，设置初始值
        this.inputValue = this.initialValue || '';
      }
    }
  },
  mounted() {
  	this.systemInfo=uni.getSystemInfoSync()
	console.log(this.systemInfo);
  },
  methods: {
    handleInput(e) {
      this.inputValue = e.detail.value;
      this.$emit('input', this.inputValue);
    },
    handleConfirm() {
      const value = this.inputValue.trim();
      if (value) {
        this.$emit('confirm', value);
        this.$emit('update:isShow', false);
      }
    },
    handleCancel() {
      this.$emit('cancel');
      this.$emit('update:isShow', false);
    },
    handleMaskClose() {
      // 点击遮罩层也触发取消事件
      this.handleCancel();
    }
  }
};
</script>

<style scoped>
/* 根容器：确保全屏覆盖，并设置一个临时背景色以便观察 */
.dialog-root {
  z-index: 9999;  /* 强制最高层级 */
  position: fixed;
  
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0 ;
  left: 0 ;
 /* 临时添加一个半透明背景，方便确认组件是否被渲染 */
  background-color: rgba(0, 0, 0, 0.1); 
}

/* 遮罩层：确保可见 */
.dialog-mask {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1; /* 强制不透明 */
}

/* 对话框主体：强制居中并可见 */
.dialog-container {
  background-color: #fff; /* 强制白色背景 */
  border-radius: 20rpx;
  padding: 30rpx;
  opacity: 1; /* 强制不透明 */
  pointer-events: auto;
  z-index: 10000; /* 确保在遮罩层之上 */
  /* 增加边框和阴影，确保它看起来像一个对话框 */
  border: 1rpx solid #eee;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

/* 标题 */
.dialog-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  text-align: center;
}

/* 输入框 */
.dialog-input {
  padding: 20rpx;
  flex: 1;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  resize: none;
/* #ifndef APP-NVUE */
		box-sizing: border-box;
	/* #endif */
}

.dialog-input::placeholder {
  color: #999;
  font-size: 26rpx;
}

/* 字数统计 */
.dialog-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 12rpx;
}

/* 按钮组 */
.dialog-btn-group {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
  margin-top: 30rpx;
}

.dialog-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  padding: 0;
  margin: 0;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background-color: #2c67ff;
  color: #fff;
}

.confirm-btn:disabled {
  background-color: #b3c9ff;
  color: #fff;
}
</style>